<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>你的邻居叫你一起来玩耍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="/pages/css/common.css" rel="stylesheet" type="text/css" />
    <link href="/pages/css/tip.css" rel="stylesheet" type="text/css" />
    <link href="/pages/inviteReward/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style type="text/css">
    .start-loading{
        position: absolute;
        z-index: 20;
        width: 100%;
        height: 100%;
        background: #fff;
    }
    .loading{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -75px;;
        width: 150px;
        height: 15px;
    }
    .loading span{
        display: inline-block;
        width: 15px;
        height: 100%;
        margin-right: 5px;
        background: lightgreen;
        -webkit-transform-origin: right bottom;
        -webkit-animation: load 1s ease infinite;
    }
    .loading span:last-child{
        margin-right: 0px;
    }
    @-webkit-keyframes load{
        0%{
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100%{
            opacity: 0;
            -webkit-transform: rotate(90deg) scale(.3);
        }
    }
    .loading span:nth-child(1){
        -webkit-animation-delay: 0.13s;
    }
    .loading span:nth-child(2){
        -webkit-animation-delay: 0.26s;
    }
    .loading span:nth-child(3){
        -webkit-animation-delay: 0.39s;
    }
    .loading span:nth-child(4){
        -webkit-animation-delay: 0.52s;
    }
    .loading span:nth-child(5){
        -webkit-animation-delay: 0.65s;
    }
</style>
<div class = "start-loading">
    <div class = "loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

<article>
    <div class = "middle-img" id = "middle_img">
    <header>
        <img src = "/pages/inviteReward/images/portrait_normal.jpg">
        <div>
            <span id = "name">xxxx</span>来自<span id = "neighborhood">上海绿城</span><br>
            <span>邀请你加入66小区</span>
        </div>
    </header>

        <img class = "main-theme" src = "/pages/inviteReward/images/main_theme.png">
        <img class = "qr-code" src = "/pages/inviteReward/images/qr_code.png">
        <img class = "theme-icon" src = "/pages/inviteReward/images/theme_icon.png">
    </div>


    <div class = "invite-area">
        <img src = "/pages/inviteReward/images/invite_tip.png" class = "invite-area-tip">
        <div>
            <input type="text" placeholder="输入手机号码" id = "phone">
            <span id = "activation">激活礼券</span>
        </div>
        <img src = "/pages/inviteReward/images/25.png" class = "invite-dollars">
    </div>
</article>
<div class = "mask" id = "mask"></div>
<div class = "join-success" id = "join_success">
    <span class = "close-button" id = "close_button"></span>
    <div class = "clear"></div>
    <div class = "done-title">礼券已激活</div>
    <div class = "done-content">放入你 <span id = "invite_phone"></span> 的账号内</div>
    <div class = "already-content">你已经领过礼券了，<br>快下载我们一起玩耍吧！</div>

    <div class = "down-tip">下载并认证即可使用啦！</div>
    <div class = "tip-arrow"></div>
    <div class = "button">下载应用</div>
</div>
</body>
<script type="text/javascript" src="/pages/static/mobile/js/lib/zepto.js"></script>
<script type="text/javascript" src="/pages/controller/common.js"></script>
<script type="text/javascript" src="/pages/controller/tip.js"></script>
<script type="text/javascript" src="/pages/inviteReward/js/index.js"></script>
</html>